<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<%--
  Created by IntelliJ IDEA.
  User: 王晓阳
  Date: 2024/4/15
  Time: 9:09
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <base href="<%=basePath%>">
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script src="webjars/layui/2.6.8/layui.js"></script>
    <link rel="stylesheet" href="webjars/layui/2.6.8/css/layui.css" media="all">
    <%@page import="java.util.*" %>
</head>
<body>
    <div class="layui-container">
        <%--条件查询--%>
<%--        <div class="layui-collapse">--%>
<%--            <div class="layui-colla-item">--%>
<%--                <h2 class="layui-colla-title">查询条件</h2>--%>
<%--                <div class="layui-colla-content layui-show">--%>
<%--                    <div class="layui-form"  id="searchForm" lay-filter="searchForm">--%>
<%--                        <div class="layui-inline" >--%>
<%--                            <div class="layui-input-inline">--%>
<%--                                <input type="text" name="startDate" style="display: none" class="layui-input">--%>
<%--                                <input type="datetime-local" id="startDates" placeholder="请输入实际巡检开始时间" step="1" class="layui-input">--%>
<%--                            </div>--%>
<%--                        </div>--%>
<%--                        <div class="layui-inline" >--%>
<%--                            <div class="layui-input-inline">--%>
<%--                                <input type="text" name="endDate" style="display: none" class="layui-input">--%>
<%--                                <input type="datetime-local" id="endDates" placeholder="请输入实际巡检结束时间" step="1" class="layui-input">--%>
<%--                            </div>--%>
<%--                        </div>--%>
<%--                        <div class="layui-inline">--%>
<%--                            <div class="layui-input-inline">--%>
<%--                                <select name="state">--%>
<%--                                    <option value="">请选择巡检类型</option>--%>
<%--                                    <option value="2">巡检中</option>--%>
<%--                                    <option value="1">未开始</option>--%>
<%--                                </select>--%>
<%--                            </div>--%>
<%--                        </div>--%>

<%--                        <div class="layui-inline" >--%>
<%--                            <button class="layui-btn" onclick="search()" >查询</button>--%>
<%--                        </div>--%>
<%--                        <div class="layui-inline" >--%>
<%--                            <button type="reset" onclick="chongzhi()" class="layui-btn layui-btn-primary">重置</button>--%>
<%--                        </div>--%>
<%--                    </div>--%>
<%--                </div>--%>
<%--            </div>--%>
<%--        </div>--%>


        <table id="plotTable" lay-filter="plotTables"  class="layui-table layui-table-hover"></table>
            <%--流转页面--%>
            <div id="update" style="display:none;padding:20px">
                <form class="layui-form" id="updateForm" lay-filter="updateForm">
                    <div class="layui-form-item" style="display: none">
                        <label class="layui-form-label">编号:</label>
                        <div class="layui-input-block">
                            <input type="text" name="id" required  class="layui-input" disabled="disabled">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">计划巡检人:</label>
                        <div class="layui-input-block">
                            <select name="projectpeople" disabled="disabled">
                                <option value="">请选择流转对象</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">流转对象:</label>
                        <div class="layui-input-block">
                            <select name="nowpeople" id="nowpeople">
                                <option value="">请选择流转对象</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">转移描述:</label>
                        <div class="layui-input-block">
                            <input type="text" name="transfernote"   class="layui-input">
                        </div>
                    </div>

                </form>
            </div>
            <%--修改页面--%>
            <div id="xiangqing" style="display:none;padding:20px">
                <table id="xiangqingTable" lay-filter="xiangqingTables"  class="layui-table layui-table-hover"></table>
            </div>
    </div>
    <script type="text/html" id="barDemo">
        <div class="layui-clear-space">
            <a class="layui-btn layui-btn-xs" lay-event="update">流转</a>
            <a class="layui-btn layui-btn-xs layui-bg-blue" lay-event="xiangqing">详情</a>
            <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete">删除</a>
        </div>
    </script>
    <%--头部工具栏，添加--%>
    <script type="text/html" id="headTool">
        <button class="layui-btn">巡检任务</button>
    </script>
    <script>
        let $=layui.$
        //发送ajax请求去查询流转对象
        $.get("/Site/SiteProject/showusermc")
            .then(({data})=>{
                //data:数组
                $(data).each(function (i,e){
                    let option = $("<option value='"+e.id+"'>"+e.username+"</option>");
                    $("[name=nowpeople]").append(option);
                });
                //重新渲染下拉列表
                layui.form.render('select');
            });
        $.get("/Site/SiteProject/showusermc")
            .then(({data})=>{
                //data:数组
                $(data).each(function (i,e){
                    let option = $("<option value='"+e.id+"'>"+e.username+"</option>");
                    $("[name=projectpeople]").append(option);
                });
                //重新渲染下拉列表
                layui.form.render('select');
            });
        //渲染表格
        layui.use(function (){
            let table=layui.table;
            table.render({
                id:"one",
                elem:"#plotTable",
                page : true,
                limit : 5,
                limits : [5,10,15,20],
                method : "post",
                contentType : "application/json",
                url:"/Site/SiteQuest/show",
                toolbar: "#headTool",
                cols:[[
                    {fixed: 'left',field:'number',width:60,align: 'center',type:'numbers',title:"编号"},
                    {field:'id',hide : true,align: 'center',title:"编号"},
                    {field:'siteproject',align: 'center',title:"巡检计划",templet(d){
                            return d.siteproject == null ? "sdfsdf" : d.siteproject.projectname;
                    }},
                    {field:'peopstartandend',align: 'center',title:"巡检开始/结束时间"},
                    {field:'realtime',align: 'center',title:"实际巡检时间",templet(d){
                            return d.realtime == null ? "-" : d.realtime;
                    }},
                    {field:'endrealtime',align: 'center',title:"实际结束时间",templet(d){
                            return d.endrealtime == null ? "-" : d.endrealtime;
                    }},
                    // {field:'projectpeople',align: 'center',title:"计划巡检人",templet(d){
                    //         return d.user.username == null ? "-" : d.user.username;
                    // }},
                    {field:'nowpeople',align: 'center',title:"巡检人",templet(d){
                            return d.user.username == null ? "-" : d.user.username;
                    }},
                    {field:'transfernote',align: 'center',title:"转移描述",templet(d){
                            return d.transfernote == null ? "-" : d.transfernote;
                    }},
                    {field:'siteway',align: 'center',title:"巡检方式",templet(d){
                            return d.siteway == 1 ? "现场拍照" : "现场定位";
                    }},
                    {field:'sitetype',align: 'center',title:"巡检状态",templet(d){
                            return d.sitetype.typename;
                        }},
                    {fixed: 'right', title:'操作', toolbar: '#barDemo'}
                ]]
            })
            //监听行工具栏事件
            table.on("tool(plotTables)",function (obj){
                if(obj.event == "delete"){
                    deletes(obj.data.id);
                }else if(obj.event == "update"){
                    updates(obj);
                } else if(obj.event == "xiangqing"){
                    xiangqing(obj);
                }
            })
        })

        //流转
        function updates(obj){
            //先赋值
            layui.form.val('updateForm', obj.data);

            $("#nowpeople").val(obj.data.user.id)
            $("[name = projectpeople]").val(obj.data.user.id)

            layui.form.render('select');

            console.log(obj.data)
            //弹窗
            layui.layer.open({
                type : 1,
                title : "修改用户",
                area:["500px","500px"],
                content: $("#update"),
                icon : 3,
                btn:["确定","取消"],
                yes(){
                    //通过表单序列化，获取输入的内容
                    var updateForm = layui.form.val("updateForm");
                    console.log(updateForm)
                    //发送ajax请求
                    $.post("/Site/SiteQuest/update",updateForm)
                        .then(({msg})=>{
                            //关闭弹出层
                            layui.layer.close(layui.layer.index);
                            //弹出消息提示框
                            layui.layer.msg(msg);
                            //刷新表格
                            layui.table.reload('one');
                        });
                }
            });
        }
        //详情
        function xiangqing(obj){
            layui.table.reload('two');
            layui.layer.open({
                type : 1,
                title : "任务详情",
                area:["1000px","520px"],
                content: $("#xiangqing"),
                icon : 3,
            });
            //渲染表格
            layui.use(function (){
                let table=layui.table;
                table.render({
                    id:"two",
                    elem:"#xiangqingTable",
                    page : true,
                    // limit : 5,
                    // limits : [5,10,15,20],
                    // method : "post",
                    // contentType : "application/json",
                    url:"/Site/SiteQuest/showxiangqing?id="+obj.data.id,
                    cols:[[
                        {fixed: 'left',field:'number',width:60,align: 'center',type:'numbers',title:"编号"},
                        {field:'id',align: 'center',hide : true,title:"编号"},
                        {field:'pointname',align: 'center',title:"巡检点名称"},
                        {field:'sitetype',align: 'center',title:"巡检类型",templet(d){
                                return d.sitetype == 2 ? "设备巡检" : "环境巡检";
                            }},
                        {field:'sitetypes',align: 'center',title:"巡检状态",templet(d){
                                return d.sitetypes.typename;
                            }},
                        {field:'startandend',align: 'center',title:"巡检点开始/结束时间",templet(d){
                                return d.startdata ==null ? "-" : d.startdata+ "~" + d.enddata;
                        }},
                        {field:'realsitetime',align: 'center',title:"实际巡检时间"},
                        {field:'note',align: 'center',title:"巡检情况"},
                        {field:'siteposition',align: 'center',title:"巡检位置"}
                    ]]
                })
            })
        }

        //点击去查询
        function search(){
            var startDates = $("#startDates").val().replace("T"," ");
            var endDates = $("#endDates").val().replace("T"," ");

            $("[name = startDate]").val(startDates)
            $("[name = endDate]").val(endDates)

            console.log($("#startDates").val(),typeof $("#startDates").val())
            console.log($("#endDates").val(),typeof $("#endDates").val())
            //获取表单的值,表单序列化
            var where = layui.form.val('searchForm');
            console.log(where)
            //条件查询，重载表格因为键和值都是where，所以可以值保留键
            layui.table.reload('one',{where : where});
        }
        //点击重置
        function chongzhi(){
            $("[name=nowpeople]").val("");
            $("[name=startDates]").val("");
            $("[name=endDates]").val("");
            $("[name=state]").val("");
            //获取表单的值,表单序列化
            var where = layui.form.val('searchForm');
            //条件查询，重载表格因为键和值都是where，所以可以值保留键
            layui.table.reload('one',{where : where});
        }
        //点击删除
        function deletes(id){
            layui.layer.open({
                type : 0,
                title : "提示",
                area:["260px","180px"],
                content:"  确定删除吗？",
                icon : 3,
                btn:["确定","取消"],
                yes(){
                    $.get("/Site/SiteQuest/delete?id="+id)
                        .then(({msg})=>{
                            //关闭弹出层
                            layui.layer.close(layui.layer.index);
                            //弹出消息提示框
                            layui.layer.msg(msg);
                            //刷新表格
                            layui.table.reload('one');
                        })
                }
            });
        }
    </script>
</body>
</html>
